<template>


  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="订单号">
        <el-input v-model="OrderDetailOrderVo.orderNum"/>
      </el-form-item>
      <el-form-item label="订单总金额">
        <el-input v-model="OrderDetailOrderVo.orderTotalMoney"/>
      </el-form-item>
      <el-form-item label="付款方式">
        <el-input v-model="OrderDetailOrderVo.paymentMethod"/>
        <template slot-scope="scope">

          <span v-if ="OrderDetailOrderVo.paymentMethod =='1'">
              <input type="text"   value="微信支付" ></span>
          <span v-else ><textarea>其他支付</textarea></span>

        </template>

      </el-form-item>

      <el-form-item label="客户名字">
        <el-input v-model="OrderDetailOrderVo.name"/>
      </el-form-item>
      <el-form-item label="下单日期">
        <el-input v-model="OrderDetailOrderVo.orderTime"/>
      </el-form-item>
      <el-form-item label="付款时间">
        <el-input v-model="OrderDetailOrderVo.paymentTime"/>
      </el-form-item>
      <el-form-item label="收货人">
        <el-input v-model="OrderDetailOrderVo.receiveName"/>
      </el-form-item>
      <el-form-item label="收货人">
        <el-input v-model="OrderDetailOrderVo.address"/>
      </el-form-item>
      <el-form-item label="收货手机">
        <el-input v-model="OrderDetailOrderVo.tel"/>
      </el-form-item>
      <el-form-item label="订单备注">
        <el-input v-model="OrderDetailOrderVo.orderStatus"/>
      </el-form-item>
      <el-form-item label="订单类型">
        <el-input v-model="OrderDetailOrderVo.isType"/>
      </el-form-item>
    <!-- <el-form-item label="讲师排序">
        <el-input-number v-model="trainer.sort" controls-position="right"/>
      </el-form-item>-->
      <el-form-item label="商品信息" >
     <!--   <el-select v-model="OrderDetailOrderVo.goodsOrderList" clearable placeholder="请选择">
          <el-option
            v-for=" GoodsOrderVo in goodsOrderList"
            :key="GoodsOrderVo.id"
            :label="GoodsOrderVo.name"
            :value="GoodsOrderVo.id"
          />
         <el-option :value='level.id' label="高级讲师"/>
              <el-option :value='level.id' label="首席讲师"/>
        </el-select>-->
        <el-table :data="OrderDetailOrderVo.goodsOrderList" border style="width: 100%">
          <el-table-column prop="name" label="商品名称" width="180"></el-table-column>
          <el-table-column prop="goodsNum" label="数量" width="180"></el-table-column>
          <el-table-column prop="price" label="单价"></el-table-column>
          <el-table-column prop="goodsTotalPrice" label="商品总价"></el-table-column>
        </el-table>
      </el-form-item>

      <div>
      优惠:        {{OrderDetailOrderVo.discount}}<br/>
        订单总金额:    {{OrderDetailOrderVo.orderTotalMoney}}
      </div>
     <!-- <el-form-item label="讲师资历">
        <el-input v-model="trainer.career"/>
      </el-form-item>
      <el-form-item label="讲师简介">
        <el-input v-model="trainer.intro" :rows="10" type="textarea"/>
      </el-form-item>-->
    <!-- 讲师头像：TODO
      <el-form-item label="讲师头像">
        <el-upload
          name="file"
          class="avatar-uploader"
          action="http://localhost:8080/Upload/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="trainer.avatar" :src=  "'http://rhfgyj3no.hn-bkt.clouddn.com/' +trainer.avatar" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="handleAddOrEdit">保存</el-button>
      </el-form-item>&ndash;&gt;-->
    </el-form>
    <span>
      <el-button @click="previous">返回</el-button>
       <span v-if ="OrderDetailOrderVo.orderStatus =='0'">待付款</span>
          <span v-else-if="OrderDetailOrderVo.orderStatus =='1'" >已付款</span>
          <span v-else-if="OrderDetailOrderVo.orderStatus=='2'" >已发货</span>
          <span v-else-if="OrderDetailOrderVo.orderStatus =='3'" >已核销</span>
          <span v-else-if="OrderDetailOrderVo.orderStatus =='4'" >已完成</span>
          <span v-else-if="OrderDetailOrderVo.orderStatus =='5'" >已取消</span>

         <el-button @click="SetAsPaid('1', orderId)">设置已付款</el-button>
       <el-button @click="SetAsPaid('2', orderId)">设置发货</el-button>
       <el-button @click="SetAsPaid('4', orderId)">设置完成</el-button>
       <el-button @click="SetAsPaid('3', orderId)">设置已核销</el-button>
       <el-button @click="SetAsPaid('5', orderId)">设置已取消</el-button>


    </span>
  </div>



</template>

<script>
  import detailorder from "../../api/detailorder";
  import order from "../../api/order";
  export default {
    data(){
      return {

        OrderDetailOrderVo:{
          goodsOrderList:[]
        },
        GoodsOrderVo:{},
        level:{},
        dataList:[],
        orderId:""

        // 表单数据绑定的数据模型
       // saveBtnDisabled: false,       // 主要是为了防止表单重复提交
      }
    },
    created() {
      if (this.$route.params && this.$route.params.orderId){
        // 获取路由地址里面的参数
        console.log(this.$route)
        this.orderId = this.$route.params.orderId;
            detailorder.searchByOrderId(this.orderId).then(
                res=>{
             this.OrderDetailOrderVo = res.data
                  if(res.data.goodsOrderList.length==0||res.data.goodsOrderList==null){
                    detailorder.searchCardByOrderId(this.orderId).then(res=>{
                      this.OrderDetailOrderVo=res.data;
                    })
                  }
        }

            )
      }
    },
    methods:{
      // 返回修改
      previous(){
        this.$router.push({path:`/order/list`})
      },
      SetAsPaid(num,orderId) {
        this.$confirm('此操作改变订单状态, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          order.setOrderStatus(num,orderId).then(
            res=>{
              console.log(res);
              // 显示提示信息
              this.$message.success(res.message)
              detailorder.searchByOrderId(this.orderId);

            }
          )

          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },

    }
  }
</script>
